﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝购物车页面</title>
    <link href="css/myCart.css"  rel="stylesheet" />
    <script src="js/js.js"></script>
</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首页</a> &gt; <a href="#">我的淘宝</a> &gt; 我的购物车</div>
<div id="navlist">
    <ul>
        <li class="navlist_red_left"></li>
        <li class="navlist_red">1. 查看购物车</li>
        <li class="navlist_red_arrow"></li>
        <li class="navlist_gray">2. 确认订单信息</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">3. 付款到支付宝</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">4. 确认收货</li>
        <li class="navlist_gray_arrow"></li>
        <li class="navlist_gray">5. 评价</li>
        <li class="navlist_gray_right"></li>
    </ul>
</div>

<div id="content">
	<form action="" method="post" name="myform">
    	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">        
            <tr>
                <td class="title_1"><input id="allCheckBox" type="checkbox" value=""/>全选</td>
                <td class="title_2" colspan="2">店铺宝贝</td>
                <td class="title_3">获积分</td>
                <td class="title_4">单价（元）</td>
                <td class="title_5">数量</td>
                <td class="title_6">小计（元）</td>
                <td class="title_7">操作</td>
            </tr>
            <tr>
                <td colspan="8" class="line"></td>
            </tr>
            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">纤巧百媚时尚鞋坊</a>    卖家：<a href="#">纤巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product1">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_01.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
                    颜色：棕色 尺码：37<br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">5</td>
                <td class="cart_td_5">138.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_1" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">香港我的美丽日记</a>    卖家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product2">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
                <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">265.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">实体经营</a>    卖家：<a href="#">林颜店铺</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product3">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">蝶妆海?蓝清滢粉底液10#（象牙白）</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
                <td class="cart_td_4">3</td>
                <td class="cart_td_5">85.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td colspan="8" class="shopInfo">店铺：<a href="#">红豆豆的小屋</a>    卖家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
            </tr>
            <tr id="product4">
                <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
                <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
                <td class="cart_td_3"><a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br />
                    保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
                <td class="cart_td_4">12</td>
                <td class="cart_td_5">12.00</td>
                <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
                <td class="cart_td_7"></td>
                <td class="cart_td_8"><a href="javascript:void(0);">删除</a></td>
            </tr>

            <tr>
                <td  colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
                <td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br />
                    可获积分 <label class="yellow" id="integral"></label> 点<br />
                    <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
            </tr>        
    	</table>
    </form>
</div>
<script  src="js/jquery-1.12.4.js"></script>
</body>
<script>
    $(function () {
        //一开始调用计算方法
        total();
        //数量减
        $("img[alt='minus']").click(function () {
           var num = $(this).parent().children("input").val();
           if(num==1){
               alert("不能再减了")
           }else {
               $(this).parent().children("input").val(parseInt(num)-1);
               total();
               xiaoji(this);
           }
        })
        //数量加
        $("img[alt='add']").click(function () {
            var num = $(this).parent().children("input").val();
            $(this).parent().children("input").val(parseInt(num)+1);
            total();
            xiaoji(this);
        })
        // 计算总价
        function total() {
            var money = document.getElementsByClassName("cart_td_5");
            var num = document.getElementsByClassName("num_input");
            var iscore = document.getElementsByClassName("cart_td_4");
            var sum = 0;
            var score = 0;
            for(var i = 0;i<money.length;i++){
                sum+=parseInt(money[i].innerHTML)*parseInt(num[i].value);
                score+=parseInt(iscore[i].innerHTML)*parseInt(num[i].value);
                xiaoji(num[i]);
            }
            $("#total").text(sum);
            $("#integral").text(score);
        }
        //全选框点击事件
        $("#allCheckBox").click(function () {
                quanxuan();
        })
        //计算小计方法
        function xiaoji(obj) {
            $(obj).parent().next().text($(obj).parent().children("input").val()*$(obj).parent().prev().text()+"￥")
        }
        //全选方法
        function quanxuan() {
            var result = $("#allCheckBox").is(':checked');
            if(result==true){
                $("[name='cartCheckBox']").prop("checked",'true');//全选
            }else {
                $("[name='cartCheckBox']").removeAttr("checked");//
            }
        }
        //删除已选点击事件
        $("img[alt='delete']").click(function () {
            delAll();
        })
        //单独删除点击事件
        $(".cart_td_8").click(function () {
            del(this);
        })
        //单独删除方法
        function del(obj) {
            var result = confirm("确定要删除吗?")
            if(result){
                $(obj).parent().prev().remove();
                $(obj).parent().remove();
                total();
            }
        }
        //删除已选方法
        function delAll() {
            var result = confirm("确定要删除吗?")
            if(result){
                $("input[name='cartCheckBox']").each(function () {
                    if($(this).is(':checked')){
                        $(this).parent().parent().prev().remove();
                        $(this).parent().parent().remove();
                        total();
                    }
                })
            }
        }
    })
</script>
</html>
